﻿@using Microsoft.Ajax.Utilities
@using NTQOnlineExam.Services.Infrastructure.MVC
@model NTQOnlineExamFrontend.Models.ExaminationDetailResultViewModel

@{
    ViewBag.Title = this.LocalResources("PageTitle");
    Layout = "~/Views/Shared/_BlankLayout.cshtml";
}


@{
    var i = 0;
}
<div class="box-content"  >
    <div class="form-horizontal">
        <fieldset>
            @foreach (var question in Model.QuestionAnswers)
            {
                var youranswer = Model.ExamDetail.Details.FirstOrDefault(x => x.QuestionId == question.QuestionId);
                i++;
                var isYourAnswerIsRight = youranswer != null && youranswer.AnswerId == question.AnswerId;
                var listAnswers = Model.Answers.Where(x => x.QuestionId == question.QuestionId).ToList();
                var display = i != 1 ? "display:none" : string.Empty;
   
                <div class="box-result" style="@display">
                    <div class="page-header">
                        <h2>@question.SectionName </h2>
                        <h3>Question @i of total @Model.QuestionAnswers.Count</h3>
                    </div>

                    <div class="row">
                        <div class="col-sm-12">
                            <h4><span class="title">Question</span> </h4>
                            <p>
                                @Html.Raw(question.Content.Trim())
                            </p>
                            <br />
                            <br />
                        </div>
                    </div>
                    <div class="row ">
                        <div class="col-sm-12">
                            <h4><span class="title">Answer</span> </h4>
                            <div id="ListAnswer">
                                @foreach (var answer in listAnswers)
                                {
                                    var spanCssClass = "";
                                    var divCssClass = "";
                                    var textCssClass = "";
                                    if (youranswer != null && youranswer.AnswerId == answer.AnswerId)
                                    {
                                        spanCssClass = "checked";
                                        if (!isYourAnswerIsRight)
                                        {
                                            divCssClass = "disabled";
                                            textCssClass = " wrong-answer";
                                        }
                                        else
                                        {
                                            textCssClass = " right-answer";
                                        }
                                    }
                                    if (string.IsNullOrWhiteSpace(spanCssClass) && question.AnswerId == answer.AnswerId)
                                    {
                                        spanCssClass = "checked";
                                        textCssClass = " right-answer";
                                    }
                                    <label class="checkbox inline">
                                        <div class="checker checkboxLeft @divCssClass" id="@("uniform-inlineCheckbox" + answer.AnswerId)">
                                            <span class="@spanCssClass">
                                                <input type="checkbox" value="@answer.AnswerId" id="@("answerCheckbox" + answer.AnswerId)" style="opacity: 0;"></span>
                                        </div>
                                        <div class="checkboxLeft @textCssClass" >@Html.Raw(@answer.AnswerContent)</div>
                                    </label>
                                   
                                }
                            </div>
                            @if (youranswer == null)
                            {
                                <div class="miss-answer-question">
                                    You didn't anwser this question
                                </div>
                            }
                        </div>
                    </div>
                </div>
            }
            <div class="form-actions">
                <button class="btn btn-large btn-blue" id="btnBack" onclick="previousQuestion();"><i class="icon-chevron-left icon-white"></i>Back </button>
                <button class="btn btn-large btn-blue" id="btnNext" onclick="nextQuestion();">Next <i class="icon-chevron-right icon-white"></i></button>
                <button class="btn btn-large btn-red" id="btnClose" onclick="closeExam();"><i class="icon-ok icon-white"></i>Close</button>
            </div>
        </fieldset>
    </div>
</div>



<script type="text/javascript">
    function closeExam() {
        window.close();
    }
    function nextQuestion() {
        var activeItem = $('.box-result:visible');
        activeItem.hide();
        if (typeof (activeItem.next('.box-result').next('.box-result')) == 'undefined' || activeItem.next('.box-result').next('.box-result').length == 0) {
            $("#btnNext").hide();
        }
        $("#btnBack").show();
        activeItem.next('.box-result').show();
    };

    function previousQuestion() {
        var activeItem = $('.box-result:visible');
        activeItem.hide();
        activeItem.prev('.box-result').show();
        $("#btnNext").show();
        if (typeof (activeItem.prev('.box-result').prev('.box-result')) == 'undefined' || activeItem.prev('.box-result').prev('.box-result').length == 0) {
            $("#btnBack").hide();
        }
    };

    $(document).ready(function () {
        $("#btnBack").hide();
        $(document)
            .bind("contextmenu", function (e) {
                return false;
            })

        .bind("keyup keydown", function (e) {
            if ((e.ctrlKey && e.keyCode == 17) || (e.keyCode == 123)
                || (e.ctrlKey && e.keyCode == 80) || e.keyCode == 44) {//prevent Ctrl-P and F12, Prt Sc
                e.preventDefault();
                return false;
            };
        });

        $('body').bind('copy paste cut drag drop', function (e) {
            e.preventDefault();
        });
    });
</script>

